<template>
  <el-container class="">
    <el-header style="height: auto">
      <el-row>
        <el-col :span="8">

          <el-input
            placeholder="请输入公司"
            prefix-icon="el-icon-search"
            v-model="input21">
          </el-input>
        </el-col>

        <el-col :span="4">
          <el-button type="primary">搜索</el-button>
        </el-col>
      </el-row>
    </el-header>
    <el-main>
      <el-row style="width:100%;">

        <el-alert
          title="供应商信息"
          type="success"
          center
          :closable="false">
        </el-alert>
        <el-col :span="24">
          <el-form label-width="120px" :inline="true" class="demo-form-inline">
            <el-form-item label="供应商名称">
              <el-tag type="">XXX供应商</el-tag>
            </el-form-item>
            <el-form-item label="发起编号">
              <el-tag type="">12312</el-tag>
            </el-form-item>
            <el-form-item label="合同编号">
              <el-tag type="">12312</el-tag>
            </el-form-item>
            <el-form-item label="合同有效期">
              <el-tag type="">2020年9月11号</el-tag>
            </el-form-item>
            <el-form-item label="子公司">
              <el-tag type="">天天公司</el-tag>
            </el-form-item>
            <el-form-item label="供货金额">
              <el-tag type="">17213.00</el-tag>
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>


      <el-row>
        <el-col :span="24">
          <el-form ref="form" :model="formChoseVal"  label-position="top" label-width="200px">
            <el-tabs v-model="activeName" tabPosition="left" @tab-click="tbclick">

              <el-tab-pane v-for="tmp in tabMapOptions" :label="tmp.label" :key="tmp.key" :name="tmp.key">
                <span slot="label">{{tmp.label}}</span><!--tabname-->

                <el-form-item v-for="mit in tmp.mapItem" :label="mit.lab" :key="mit.id" >

                  <el-radio-group  v-model="tabMapVal[tmp.key][mit.id]">
                  <!--<el-radio-group  v-model="mit.val">-->
                    <el-radio v-for="(mitem ,index3) in mit.item"  :key="index3" :label="mitem.key">{{mitem.label}}</el-radio>
                  </el-radio-group>
                </el-form-item>

              </el-tab-pane>
            </el-tabs>

            <el-form-item>
              <el-button type="primary" @click="onSubmit" style="    margin-left: 25%;">提交</el-button>
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>
    </el-main>
    <!--<el-footer>Footer</el-footer>-->
  </el-container>


</template>

<script>
  export default {
    name: "supplierEvaluation",

    data() {
      return {
        input21: '',
        formChoseVal:{},
        tabMapVal:{
          a1:{
            l1:'',
            l2:'',
            l3:'',
          },
          b2:{
            l1:'',
            l2:'',
            l3:'',
          },
          c3:{
            l1:'',
            l2:'',
            l3:'',
          },
        },
        tabMapOptions: [
          { label: '产品名称、数量、金额、供货时间(25分）', val: 0 , key: 'a1',mapItem:[
              {
                lab:'发货和交货及时性（10分）',
                id:'l1',
                val:'',
                item:[
                  { label: '按合同和买方订货传真要求在规定时间内发货和交货: 10分', key: 'CN' },
                  { label: '未按约定到货周期发货和交货，但未影响买方生产：6分', key: 'US' },
                  { label: '未按约定到货周期发货和交货，导致买方临时更换渠道保供的：4分', key: 'JP' },
                  { label: '未按约定到货周期发货和交货，影响买方生产且产生额外费用和差价的：0分', key: 'EU' }
                ]
              },
              {
                lab:'2发货和交货及时性（10分）',
                id:'l2',
                val:'',
                item:[
                  { label: 'China', key: 'CN' },
                  { label: 'USA', key: 'US' },
                  { label: 'Japan', key: 'JP' },
                  { label: 'Eurozone', key: 'EU' }
                ]
              },
              {
                lab:'3发货和交货及时性（10分）',
                id:'l3',
                val:'',
                item:[
                  { label: 'China', key: 'CN' },
                  { label: 'USA', key: 'US' },
                  { label: 'Japan', key: 'JP' },
                  { label: 'Eurozone', key: 'EU' }
                ]
              },
            ]},
          { label: '质量要求、技术标准、卖方对质量负责的条件和期限（30分）', val: 1 , key: 'b2',mapItem:[
              {
                lab:'验收质量（10分）',
                id:'l1',
                val:'',
                item:[
                  { label: 'China', key: 'CN' },
                  { label: 'USA', key: 'US' },
                  { label: 'Japan', key: 'JP' },
                  { label: 'Eurozone', key: 'EU' }
                ]
              },
              {
                lab:'使用质量和处理效果（10分）',
                id:'l2',
                val:'',
                item:[
                  { label: '2China', key: 'CN' },
                  { label: '2USA', key: 'US' },
                  { label: '2Japan', key: 'JP' },
                  { label: '2Eurozone', key: 'EU' }
                ]
              },
              {
                lab:'抽检质量和处理效果（10分）',
                id:'l3',
                val:'',
                item:[
                  { label: '3China', key: 'CN' },
                  { label: '3USA', key: 'US' },
                  { label: '3Japan', key: 'JP' },
                  { label: '3Eurozone', key: 'EU' }
                ]
              },
            ]},
          { label: '结算方式及期限（15分）', val: 1 , key: 'c3',mapItem:[
              {
                lab:'账务核对及票据处理（8分）',
                id:'l1',
                val:'',
                item:[
                  { label: 'China', key: 'CN' },
                  { label: 'USA', key: 'US' },
                  { label: 'Japan', key: 'JP' },
                  { label: 'Eurozone', key: 'EU' }
                ]
              },
              {
                lab:'承兑支付情况（7分）',
                id:'l2',
                val:'',
                item:[
                  { label: 'China', key: 'CN' },
                  { label: 'USA', key: 'US' },
                  { label: 'Japan', key: 'JP' },
                  { label: 'Eurozone', key: 'EU' }
                ]
              },
              {
                lab:'3发货和交货及时性（10分）',
                id:'l3',
                val:'',
                item:[
                  { label: 'China', key: 'CN' },
                  { label: 'USA', key: 'US' },
                  { label: 'Japan', key: 'JP' },
                  { label: 'Eurozone', key: 'EU' }
                ]
              },
            ]},
        ],

        activeName:'',

      }
    },
    mounted(){
      this.activeName=this.tabMapOptions[0].key
    },
    methods:{
      tbclick(){
        console.log(this.tabMapVal)
      }
    }
  }

</script>

<style>
  .el-alert__title {
    font-size: 24px;
    line-height: 24px;
  }
  .el-radio:first-child{
    margin-left: 30px;
  }
</style>
